<template>
  <div style="height: 700px;width: 100%;">
    <el-row>
      <el-col :span="12" style="text-align: center;align-items: center"> {{platform=='mxc'?'抹茶':platform=='hoo'?'虎符':'瓦特' }}交易所</el-col>
      <el-col :span="12" style="text-align: right;padding-right: 50px">
        <el-button type="primary" circle icon="el-icon-refresh-right" @click="loadOdp"></el-button>
      </el-col>
    </el-row>
    <e-charts auto-resize :options="deptChartOption" @legendselectchanged="legendSelectChanged"
              style="height: 100%;width: 100%;" ></e-charts>
  </div>
</template>

<script>
  import {
    analyseDepths
  } from "@/api/platform/running";

  import ECharts from 'vue-echarts';
  require('echarts/lib/chart/line');
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/legendScroll');

  export default {
    props: {
      platform: null,
      runningId: null,
    },
    components: {ECharts},
    data() {
      return {
        deptChartOption: {
          grid: {left: 80, top: 30, right: 80, bottom: 80},
          tooltip: {
            confine: true,
            trigger: 'axis',
            alwaysShowContent: false,
            axisPointer: {type: 'line', lineStyle: {color: 'rgba(0, 0, 0, 0)'}},
            backgroundColor: '#355475',
            textStyle: {color: '#fff', fontSize: '14px'},
            extraCssText: 'box-shadow: 0 0 16px 0 rgba(0, 0, 0, .2);border-radius: 4px;'
          },
          legend: {
            data: [
              {name: '买单', icon: 'rect'},
              {name: '卖单', icon: 'rect'}
            ],
            selected: {
              '买单': true,
              '卖单': true
            },
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {color: '#fff'},
            pageIconColor: '#4CC453'
          },
          xAxis: {
            type: 'category',
            axisLine: {show: true},
            axisTick: {show: true},
            axisLabel: {show: true},
            boundaryGap: true,
            data: []
          },
          yAxis: [{
            type: 'value',
            axisLine: {show: true},
            axisTick: {show: true},
            axisLabel: {show: true},
            splitLine: {show: true}
          }, {
            name: '成本曲线',
            nameLocation: 'start',
            type: 'value',
            inverse: true
          }
          ],
          series: [
            {
              name: '市值买单',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              showSymbol: false,
              symbolSize: 3,
              sampling: 'average',
              itemStyle: {normal: {color: '#02930F'}},
              lineStyle: {normal: {color: '#02930F'}},
              areaStyle: {color: '#02930F', opacity: 0.3},
              data: []
            },
            {
              name: '盘口买单',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              showSymbol: false,
              symbolSize: 3,
              sampling: 'average',
              itemStyle: {normal: {color: '#02930F'}},
              lineStyle: {normal: {color: '#0F2F99'}},
              areaStyle: {color: '#02930F', opacity: 0.1},
              data: []
            },
            {
              name: '市值卖单',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              showSymbol: false,
              symbolSize: 3,
              sampling: 'average',
              itemStyle: {normal: {color: '#D90303'}},
              lineStyle: {normal: {color: '#D90303'}},
              areaStyle: {color: '#D90303', opacity: 0.3},
              data: []
            },
            {
              name: '盘口卖单',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              showSymbol: false,
              symbolSize: 3,
              sampling: 'average',
              itemStyle: {normal: {color: '#D90303'}},
              lineStyle: {normal: {color: '#0F2F99'}},
              areaStyle: {color: '#D90303', opacity: 0.2},
              data: []
            }, {
              name: '散户买单',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              showSymbol: false,
              symbolSize: 3,
              sampling: 'average',
              itemStyle: {normal: {color: '#02930F'}},
              lineStyle: {normal: {color: '#BE0CBC'}},
              areaStyle: {color: '#0B7B1D', opacity: 0.5},
              data: []
            }, {
              name: '散户卖单',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              showSymbol: false,
              symbolSize: 3,
              sampling: 'average',
              itemStyle: {normal: {color: '#02930F'}},
              lineStyle: {normal: {color: '#BE0CBC'}},
              areaStyle: {color: '#AF0303', opacity: 0.5},
              data: []
            },
            {
              name: '砸盘成本',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              showSymbol: false,
              symbolSize: 3,
              yAxisIndex: 1,
              sampling: 'average',
              itemStyle: {normal: {color: '#6082B1'}},
              lineStyle: {normal: {color: '#6082B1'}},
              areaStyle: {color: '#6082B1', opacity: 0.5},
              data: []
            },
            {
              name: '拉盘成本',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              showSymbol: false,
              yAxisIndex: 1,
              symbolSize: 3,
              sampling: 'average',
              itemStyle: {normal: {color: '#6082B1'}},
              lineStyle: {normal: {color: '#6082B1'}},
              areaStyle: {color: '#6082B1', opacity: 0.5},
              data: []
            }
          ]
        }
      };
    },
    mounted() {
      this.loadOdp();
      this.deptChartOption.tooltip.formatter = this.deptChartHover;
    },
    methods: {
      loadOdp() {
        console.log(this.platform)
        analyseDepths(this.runningId, {'platform': this.platform}).then(res => {
          console.log('load platform odp data')
          let odpdata = res.data
          this.deptChartOption.xAxis.data = odpdata.prices
          this.deptChartOption.series[0].data = odpdata.bidOrders
          this.deptChartOption.series[1].data = odpdata.bidsDepth
          this.deptChartOption.series[2].data = odpdata.askOrders
          this.deptChartOption.series[3].data = odpdata.asksDepth
          this.deptChartOption.series[4].data = odpdata.bidDelta
          this.deptChartOption.series[5].data = odpdata.askDelta
          this.deptChartOption.series[6].data = odpdata.bidDeltaValue
          this.deptChartOption.series[7].data = odpdata.askDeltaValue
        })
      },
      legendSelectChanged(obj) {
        const selected = obj.selected;
        if (selected) {
          this.deptChartOption.legend.selected[obj.name] = selected[obj.name];
        }
      },
      deptChartHover(value) {
        console.log(value)
        let result = '';
        value.map(item => {
          if (item.value !== '') {
            result += value[0].axisValue + item.seriesName + ':' + item.value + '</br>';
          }
        });
        return result;
      }
    }
  };
</script>

